<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生列表-学生信息管理系统</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="datepicker/WdatePicker.css">
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }
        
        #pop {
            padding: 20px 50px;
            width: 600px;
            background-color: rgb(231, 212, 212);
            border-radius: 10px;
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
        }
        
        #pop h2 {
            margin-bottom: 18px;
            text-align: center;
            margin-top: -10px;
        }
        
        select {
            margin-top: 5px;
        }
        
        #shs {
            padding: 20px 50px;
            width: 600px;
            background-color: pink;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
        }
        
        #shs #shan,
        #bushan {
            width: 30%;
            font-size: 24px;
            margin-left: 40px;
        }
        
        #shs p {
            font-size: 20px;
        }
    </style>
</head>

<body>


    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <hr>
        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="shs">
        <p>真的要删吗？</p>
        <button id="shan">确定</button>
        <button id="bushan">取消</button>
    </div>
    <div id="pop">
        <h2>新增学生信息</h2>

        <div id="box">
            <div id="box1" style="padding-bottom:10px;">
                姓名：<input type="text" id="nname">
            </div>
            <div id="box2" style="padding-bottom:10px;">
                年龄：<input type="text" id="aage">
            </div>
            <div id="box3" style="padding-bottom:10px;">
                性别：<input type="radio" name="hh">男<input type="radio" id="ssex" name="hh">女
            </div>
            <div id="box4" style="padding-bottom:10px;">
                所在城市：
                <!-- <label class="col-sm-2 control-label">所在城市</label> -->
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>
            <div id="box5" style="padding-bottom:10px;">
                入学日期：<input type="text" id="date">
            </div>
            <div id="box6" style="text-align:center;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
        <!-- <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
				<input type="radio" name="sex" checked>男
			</label>
                <label class="radio-inline">
				<input type="radio" name="sex" id="data-female">女
			</label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
                </div>
            </div>

            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div> -->

    </div>

    <script src="jquery.min.js"></script>
    <script src="citys.js"></script>
    <script src="datepicker/WdatePicker.js"></script>
    <script>
        let uname = sessionStorage.getItem("name")
        if (!uname) {
            alert("请您先去登录")
            location.href = "dneg.html"
        }

        // 在页面上展示数据
        $.ajax({
            url: "http://10.35.170.123:81/select",
            success(data) {
                var data = JSON.parse(data)


                data.forEach(item => {
                    // console.log(item);
                    let template = $("#template").clone(true);
                    template.attr("id", "")

                    template.find(".data-id").html(item.id)
                    template.find(".data-name").html(item.name)
                    template.find(".data-age").html(item.age)
                        // template.find(".data-sex").html(item.sex)
                    if (item.sex == 1) {
                        template.find(".data-sex").html("女")
                    } else {

                        template.find(".data-sex").html("男")
                    }
                    template.find(".data-city").html(item.city)
                    template.find(".data-joinDate").html(item.date)
                    $(".data-wrap").append(template)


                })
            }

        })

        // 删除
        let template = $("#template");
        $(".data-delete").click(function() {
            $("#mask").show()
            $("#shs").show()
            let id = $(this).closest("tr").find(".data-id").html();
            $("#shan").click(function() {

                $.ajax({
                    url: "http://10.35.170.123:81/shanchu",
                    data: {
                        id: id
                    },
                    success(data) {
                        if (data === 'success') {
                            history.go(0)
                        }
                    }
                })
            })

            $("#bushan").click(function() {
                $("#mask").css("display", "none"),
                    $("#shs").css("display", "none")
            })

        })

        // 新增学生
        $("#addStudent").click(function() {
            $("#mask").show()
            $("#pop").show()
            $("#submit").click(function() {
                if ($("#nname").val() && $("#aage").val() && $("#date")) {
                    $.ajax({
                        url: "http://10.35.170.123:81/xinzhen",
                        data: {
                            name: $("#nname").val(),
                            age: $("#aage").val(),
                            sex: $("#ssex")[0].checked ? 0 : 1,
                            city: $("#province").val() + $("#city").val() + $("#area").val(),
                            joinDate: $("#date").val(),

                        },
                        success(data) {
                            if (data === 'success') {
                                history.go(0)
                            } else {
                                alert("错了，从来")
                            }
                        }

                    })


                }


            })


            $("#cancel").click(function() {
                $("#mask").css("display", "none"),
                    $("#pop").css("display", "none")
            })
        })


        // 编辑学生

        $(".data-edit").click(function() {
            $("#mask").show()
            $("#pop").show()
            $("#nname").val($(this).closest("tr").find(".data-name").html())
            $("#aage").val($(this).closest("tr").find(".data-age").html())
            if ($(this).closest("tr").find(".data-sex").html() === "男") {
                $("#ssex")[0] = true
            } else {
                $("#ssex").next[0] = true
            }
            console.log($(this).closest("tr").find(".data-id").html());
            $("#date").val($(this).closest("tr").find("data-joinDate").html())
            $("#submit").click(function() {
                $("#mask").hide()
                $("#pop").hide()
                $.ajax({
                    url: "http://10.35.170.123:81/bianji",
                    data: {
                        id: $(this).closest("tr").find(".data-id").html(),
                        name: $("#nname").val(),
                        age: $("#aage").val(),
                        sex: $("#ssex")[0].checked ? 1 : 0,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        Date: $("#date").val(),
                    },
                    success(data) {
                        if (data === 'success') {
                            history.go(0)
                                // alert(1)
                        } else {
                            // alert("修改错误")
                            console.log("error");
                        }
                    }
                })
            })

            $("#cancel").click(function() {
                $("#mask").css("display", "none"),
                    $("#pop").css("display", "none")
            })
        })
    </script>
</body>

</html>